{extend name="layout/iframe_layout" /}

{block name="title"}角色管理{/block}
{block name="style"}
<style>

</style>
{/block}

{block name="content"}

<div id="app" >
    <div class="app-container">
         {include file="public/search_form" /}

        <div class="action-btns">
            <el-button-group>
                <el-button type="info" size="mini" icon="el-icon-refresh" @click="search">刷新</el-button>
                <el-button type="success" size="mini" icon="el-icon-plus" @click="openDialog">新增
                </el-button>

            </el-button-group>
            <el-button-group>
                <el-button type="primary" size="mini" icon="el-icon-menu" @click="showColumnSetting = true">字段配置</el-button>
            </el-button-group>

        </div>
        <el-table
                ref="multipleTable"
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
                tooltip-effect="dark"
                style="width: 100%"
                align="center"
                @selection-change="handleSelectionChange"
        >
            <!--      <el-table-column type="selection" width="55" align="center" prop="id"/>-->
              {include file="public/table_column" /}
            <el-table-column align="center" prop="created_at" label="操作" fixed="right" width="130">
                <template v-slot:default="{scope,row}">
                    <el-row type="flex" justify="space-around">
                        <el-button
                                size="mini"
                                type="primary"
                                title="修改"
                                icon="el-icon-edit"
                                circle
                                @click="editData(row)"
                        ></el-button>
                        <el-button
                          type="warning"
                          size="mini"
                          icon="el-icon-s-check"
                          circle
                          @click="goUrl('/admin/role/set_auth',{role_id:row.role_id})"
                        ></el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="del({id:row.role_id})"></el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>

        <!-- 字段设置对话框 -->
        {include file="public/show_column_setting" /}
        <!--分页-->
        {include file="public/pagination" /}
    </div>

    <!-- 弹窗：新增/编辑 -->
    <el-dialog
            :title="form.role_id ? '编辑' : '新增'"
            :visible.sync="dialogVisible"
            width="600px"
            top="5vh"
            :close-on-click-modal="false"
            append-to-body
    >
        <el-form :model="form" label-width="100px">
            <el-form-item label="名称" required>
                <el-input v-model="form.role_name" autocomplete="off" placeholder="请输入"  />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveData">保存</el-button>
        </div>
    </el-dialog>
</div>
{/block}

{block name="script"}
<script>
    Vue.mixin(commonMethods);//引入公共方法
    var api_base = '/role';
    new Vue({
        el: '#app',
        data() {
            return {
               dialogVisible: false,
                form: {
                    id: 0,
                    role_id: 0,
                    role_name: '',
                },

                listQuery:{
                    page: 1,
                    limit: 10
                },
                search_fields: [

                ],
                multipleSelection: [],
                el_table_column: [],
                list: null,
                listLoading: true,
                total: 0,
                searchForm: {
                    type: '',
                    keyword: '',
                    sort: '',
                    created_time: ''
                },

                isAllChecked: true, // 是否全选
                isIndeterminate: true, // 全选框是否为不确定状态
                checkList: [], // 选择的字段名称（标签）
                showColumnSetting: false,
                visibleColumns: [] // 当前显示的列配置
            };
        },
        methods: {

            openDialog() {
                this.form = {
                    id: 0,
                    role_id: 0,
                    role_name: '',
                };
                Object.keys(this.form).forEach(key => this.form[key] = '');
                this.dialogVisible = true;
            },
            editData(row) {
                Object.keys(this.form).forEach(key => this.form[key] = row[key]);
                this.form.id = row.role_id;
                this.dialogVisible = true;
            },
            saveData() {
                if (!this.form.role_name) {
                    this.$message.error('请填写名称');
                    return;
                }
                (this.form.role_id? put(api_base+'/save', this.form) : post(api_base+'/save', this.form))
                    .then(res => {
                        if (res.code != 0) {
                            this.$message.error(res.msg || '保存失败');
                            return;
                        }
                        this.$message.success(this.form.id ? '已更新' : '已新增');
                        this.dialogVisible = false;
                        this.fetchData(true);
                    }).catch(error => {
                    console.error('保存功能失败:', error);
                });
            }
        },
        mounted() {
            this.fetchListConfig();
            this.fetchData();
        }
    });
</script>
{/block}
